import { Radio, Input } from 'antd';
import { connect } from 'react-redux';
import constants from 'share/constants';
import React, { Component } from 'react';
import menuRoute from 'routes/menuRoute';
import 'styles/payment-request/payment-table.scss';
import AdvancedTable from 'components/advanced-table';
import ListDecorator from './commom-list/list-decorator';
import Proxies from 'components/template/proxies/proxies';
import Stations from 'components/template/proxies/stations';
import { dealListTag, messages, queryCurrencyPrecision } from 'share/common';
import openSlideFrame from 'share/openSlideFrame';

const Search = Input.Search;

@ListDecorator
class PaymentRequest extends Component {

  state = {
    businessCode: ''
  };

  name = 'payment-request';

  statusRadio = [{
    label: messages('common.all')/*全部*/,
    value: 'all'
  }].concat(...constants.paymentStatus);

  handleSearchForm = new Map([
    ['applicantOIDs',
      (context) => {
        context.props.listExtraParams.setOfBooksId = this.props.setOfBooksId;
        return context;
      }],
    ['status',
      (context) => {
        context.component = <Radio.Group>
          {
            this.statusRadio
              .filter(item => this.props.profile['finance.payment.cancel'] ? true : item.value !== '1015')
              .map(item => <Radio key={item.value} value={item.value}>{item.label}</Radio>)
          }
        </Radio.Group>;
        context.tagParser = value => this.statusRadio.find(item => item.value === value).label;
        context.parser =  value => ({
          status: value === 'all' ? '' : value
        });
        return context;
      }
    ]
  ]);

  handleColumns = new Map([
    ['totalAmount',
      (context) => {
        context.render = (value, item) => this.filterMoney(value, queryCurrencyPrecision(item.currencyCode));
        return context;
      }]
  ]);

  handleSearchParams = (page, size, searchParams) => {
    const { businessCode } = this.state;
    if (!!searchParams.status) {
      const temp = searchParams.status.match(/\d{4}/g);
      if (temp.length === 1) {
        searchParams.status = temp[0];
      } else if (temp.length === 2) {
        searchParams.status = temp[0];
        searchParams.rejectType = temp[1];
      }
    }
    const params = { ...searchParams, businessCode };
    return this.service({page, size, ...params})
  };

  handleNewExpenseReport = (formOid, jobId, userOID) => {
    this.context.router.push(
      menuRoute.getRouteItem('new-payment-request')
        .url
        .replace(':formId', formOid)
        .replace(':userOID', userOID)
        .replace(':applicantJobId', jobId)
    );
  };

  handleRowClick = record => {
    openSlideFrame.openPaymentDetail({
      paymentRequestOID: record.paymentRequestOID,
      entry: 'my'
    }, {
      afterClose: (flag) => {
        flag && this.advancedTableRef.getList(true);
      }
    }, this);

  };

  handleSearch = businessCode => {
    this.setState({ businessCode }, () => {
      this.advancedTableRef.getList(true, 1);
    });
  };

  render() {
    return (
      <section className='payment-request full-height-page'>
        <AdvancedTable
          index
          title={messages('expense-18.key49')/*付款申请单*/}
          columns={this.columns}
          searchForm={this.searchForm}
          service={this.handleSearchParams}
          rowKey="paymentRequestOID"
          expandedRowRender={dealListTag}
          onRow={record => ({
            onClick: () => this.handleRowClick(record)
          })}
          waterMark={true}
          onRef={ref => this.advancedTableRef = ref}
          tableName='payment-request'
          expandAll
        >
          <div className="table-header">
            <div className="table-header-buttons">
              {/*新建报销单（包含多岗的情况）*/}
              <Stations formType="105" onOk={this.handleNewExpenseReport}/>
              {/*代理制单*/}
              {/*<Proxies formType="105" onOk={this.handleNewExpenseReport}/>*/}
              <Search
                className="payment-request__input"
                placeholder={messages('expense-18.key50')/*请输入付款单单号*/}
                onChange={(e) => this.handleSearch(e.target.value)}
              />
            </div>
          </div>
        </AdvancedTable>
      </section>
    );
  }
}

PaymentRequest.contextTypes = {
  router: React.PropTypes.object
};

PaymentRequest.propTypes = {};

const mapStateToProps = (state) => {
  return {
    language: state.main.language,
    expenseReport: state.cache.expenseReport,
    profile: state.login.profile,
    company: state.login.company
  };
};

export default connect(mapStateToProps)(PaymentRequest);
